<template>
  <div>
    <van-nav-bar
      title="支付页面"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div id="neiRong">
      <div>
        <h2 class="title">{{ title }}</h2>
        <hr />
        <div>
          <h3>使用有效期</h3>
          <h4 class="price">
            2021-12-31前可使用
            <span>￥{{ price }}</span>
          </h4>
          <div class="number">
            <h3>购买数量</h3>
            <div>
              <button @click="jian">-</button>
              <span>{{ number }}</span>
              <button @click="jia">+</button>
            </div>
          </div>
          <div class="xianGou">每单不限量出售</div>
          <hr />
          <h3>优惠</h3>
          <div class="youHui">
            <div>优惠券</div>
            <div>暂无优惠券</div>
          </div>
        </div>
      </div>
    </div>
    <div class="neiRong2">
      <div>
        <h3>本单可享</h3>
        <p>
          支付成功后返188元酒店券，充公支付后可得50元养生欢乐礼包，成功支付后可得到6元优惠券
        </p>
      </div>
    </div>
    <div class="diBu">
      <h4>
        总价:
        <span>￥{{ money }}</span>
      </h4>
      <div>
        <span>明细~</span>
        <span>
          <button @click="payMoney">去支付</button>
        </span>
      </div>
    </div>
    <div class="zhiFu" v-if="zhiFu">
      <div>
        <span class="onoff" @click="guanBi">×</span>
        <h1>本单共支付{{ money }}</h1>
        <div>
          <h3>请选择支付方式:</h3>
          <img src="https://static.easyicon.net/preview/122/1226452.gif" alt />
          <img src="https://static.easyicon.net/preview/122/1226612.gif" alt />
        </div>
        <div>
          <h3>
            <button class="button" @click="zhifuChengGong">立即支付</button>
          </h3>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cid: "",
      activeName: "a",
      results: {},
      title: "",
      price: 0,
      number: 0,
      // 总价
      money: 0,
      zhiFu: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/lvxq", query: { id: this.cid } });
    },
    jian() {
      if (this.number > 0) {
        this.number--;
        this.money = this.price * this.number;
      }
    },
    jia() {
      this.number++;
      this.money = this.price * this.number;
    },
    payMoney() {
      if (this.money != 0) {
        this.zhiFu = true;
      } else {
        this.$messagebox("您还没选择任何商品呢！~~~");
      }
    },
    zhifuChengGong() {
      this.$messagebox("支付成功！感谢您的信任与支持！~~~");
      this.zhiFu = false;
      this.$router.push("/");
    },
    guanBi() {
      this.zhiFu = false;
    },
  },
  mounted() {
    // console.log("进入了结算页面");
    this.cid = this.$route.query.cid;
    // console.log(this.cid);
    this.$axios.get("details?cid=" + this.cid).then((res) => {
      this.results = res.data.result[0];
      // console.log(this.results);
      this.title = this.results.pinglun3.split("，")[0];
      this.price = this.results.money.split("-")[0];
    });
  },
};
</script>

<style scoped>
#neiRong,
.neiRong2 {
  margin: 10px 5px;
  background-color: #f1f0ed;
  border-radius: 5px;
}
#neiRong > div:first-child {
  margin: 0 15px;
  padding-bottom: 5px;
}
.title {
  padding: 20px 0;
}
.price {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}
.price > span {
  color: red;
}
.number {
  display: flex;
  justify-content: space-between;
}
.number button {
  width: 30px;
  height: 30px;
  background-color: silver;
  border: 0;
  border-radius: 5px;
  margin: 0 5px;
}
.xianGou {
  margin: 25px 0;
  padding: 5px;
  background-color: salmon;
  border-radius: 10px;
}
.youHui {
  margin: 25px 0;
  display: flex;
  justify-content: space-between;
}
.neiRong2 > div:first-child {
  margin: 0 15px;
  padding-bottom: 5px;
}
.neiRong2 h3 {
  padding: 10px 0;
}
.neiRong2 p {
  width: 70%;
  margin: 0 auto;
  padding: 20px 0;
  color: steelblue;
  font-size: 16px;
}
.diBu {
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: fixed;
  padding: 13px 10px;
  background-color: skyblue;
  border-radius: 5px;
  bottom: 0px;
}
.diBu h4 {
  margin-top: 10px;
  z-index: 1000;
}
.diBu h4 > span {
  color: red;
  font-weight: bold;
  font-size: 16px;
}
.diBu button {
  padding: 10px 15px;
  background-color: aqua;
  border: 0;
  border-radius: 8px;
}
.zhiFu {
  width: 94%;
  height: 200px;
  border-radius: 8px;
  position: fixed;
  top: 30%;
  left: 3%;
  text-align: center;
  background-color: skyblue;
}
.zhiFu h1 {
  margin-top: 20px;
}
.zhiFu img {
  width: 30px;
  margin: 10px;
}
.button {
  padding: 10px 15px;
  border: 0;
  background-color: sandybrown;
  border-radius: 5px;
}
.zhiFu > div:first-child {
  position: relative;
}
.onoff {
  font-size: 30px;
  color: red;
  position: absolute;
  right: 10px;
  top: -20px;
}
.font- {
  font-size: 16px;
  color: aqua;
  margin-top: 10px;
  width: 85px;
  margin-right: 45px;
}
.head {
  display: flex;
  text-align: center;
}
.position {
  position: absolute;
  top: 3px;
  color: aqua;
}
</style>
